import React from 'react';
import {
  IonCard,
  IonCardHeader,
  IonCardContent,
  IonCardTitle,
  IonButton,
} from '@ionic/react';

interface WalletCardProps {
  balance: number;
}

const WalletCard: React.FC<WalletCardProps> = ({ balance }) => {
  return (
    <IonCard>
      <IonCardHeader>
        <IonCardTitle>我的钱包</IonCardTitle>
      </IonCardHeader>
      <IonCardContent>
        <div className="ion-justify-content-between ion-align-items-center">
          <div>
            <p>当前余额:</p>
            <h2>{balance}</h2>
          </div>
          <IonButton fill="clear">充值按钮</IonButton>
        </div>
      </IonCardContent>
    </IonCard>
  );
};

export default WalletCard;